<template>
	<view>
		<swiper class="swiper" circular :indicator-dots="indicatorDots" :autoplay="autoplay" :interval="interval"
			:duration="duration">
			<swiper-item v-for="(item,index) in listc" @click="yuna(index)">
				<view class="swiper-item">
					<image :src=" item.pics_big" style="height: 60%;width:60%;" alt='图片加载失败'></image>
				</view>
			</swiper-item>
		</swiper>
		<view class="dppds-xq">
			<view class="dppds-xq-jiage">
				￥{{Listcon.goods_price}}
			</view>
			<view class="dppds-xq-const">
				<view>{{Listcon.goods_name}}</view>
				<view>
					<image src="/static/收藏.png" style="height: 25%;width: 25%;" mode=""></image>
					<view>收藏</view>
				</view>
			</view>
		</view>
		<rich-text :nodes="Listcon.goods_introduce"></rich-text>
	</view>
	<view class="uni-container">
		<view class="goods-carts">
			<uni-goods-nav :options="arrco.options" :fill="true" :button-group="buttonGroup" @click="onClick"
				@buttonClick="buttonClick" id='gomai' />
		</view>
	</view>
	<uni-popup ref="popup" type="share">
		<uni-popup-share title="分享到" @select="select"></uni-popup-share>
	</uni-popup>
	<view style="height: 100rpx;">
		
	</view>
</template>

<script setup>
	import {
		Usegwo
	} from "/store";
	import {
		reactive,
		toRefs,
		getCurrentInstance,
		onMounted,
		computed,
		ref
	} from 'vue'

	let store = Usegwo();
	const arrco = reactive({
		options: [{
			icon: 'chat',
			text: '客服'
		}, {
			icon: 'undo',
			text: '分享',
			infoBackgroundColor: '#007aff',
			infoColor: "#f5f5f5"
		}, {
			icon: 'cart',
			text: '购物车',
			info: 0
		}],
		buttonGroup: [{
				text: '加入购物车',
				backgroundColor: 'linear-gradient(90deg, #FFCD1E, #FF8A18)',
				color: '#fff'
			},
			{
				text: '立即购买',
				backgroundColor: 'linear-gradient(90deg, #FE6035, #EF1224)',
				color: '#fff'
			}
		],
		customButtonGroup: [{
				text: '加入购物车',
				backgroundColor: 'linear-gradient(90deg, #1E83FF, #0053B8)',
				color: '#fff'
			},
			{
				text: '立即购买',
				backgroundColor: 'linear-gradient(90deg, #60F3FF, #088FEB)',
				color: '#fff'
			}
		],
		customButtonGroup1: [{
			text: '立即购买',
			backgroundColor: 'linear-gradient(90deg, #FE6035, #EF1224)',
			color: '#fff'
		}]
	})
	const jic = reactive({
		id: '',
		indicatorDots: true,
		autoplay: true,
		interval: 2000,
		duration: 500,
		Listbreen: [],
		Listcon: [],
		open: null
	})

	onMounted(() => {
		jic.open = getCurrentInstance().data.open;
		arrco.options[2].info = store.gowc();
		uni.request({
			url: "https://www.uinav.com/api/public/v1/goods/detail?goods_id=" + getCurrentInstance().data.id,
			success(res) {
				jic.Listbreen = res.data.message.pics;
				jic.Listcon = res.data.message;
			}
		})
	})

	let listc = computed(() => {
		return jic.Listbreen
	})

	function onClick(e) {
		if (e.content.text == '购物车') {
			uni.switchTab({
				url: "/pages/cart/cart"
			})
		} else if (e.content.text == '分享') {
			jic.open();
		}
	}

	function buttonClick(e) {
		if (e.index == 1) {
			console.log('立即购买')
		} else if (e.index == 0) {
			let num = 0;
			store.Gowu.forEach(item=>{
				if(item.id == jic.Listcon.goods_id){
					num++
				}
			})
			if(num){
				tis('购物车已拥有');
				return
			}
			store.Gowu.push({
				id:jic.Listcon.goods_id,
				name:jic.Listcon.goods_name,
				price:jic.Listcon.goods_price,
				logo:jic.Listcon.goods_small_logo,
				shul:1,
				zt:true
			})
			arrco.options[2].info = store.gowc();
			uni.setStorageSync('Gowu',store.Gowu)
			
			tis('加入成功');
		}
	}
	
	function tis(n){
		uni.showLoading({
		    title: n,
		  })
		setTimeout(()=>{
			 uni.hideLoading()
		},500)
	}
	
	function yuna(index){
		 uni.previewImage()
		 let arrss =  jic.Listbreen.map(x=> x.pics_big)
		uni.previewImage({
		    // 预览时，默认显示图片的索引
		    current: index,
		    // 所有图片 url 地址的数组
		    urls:arrss
		})
	}
	
	let {
		id,
		indicatorDots,
		autoplay,
		interval,
		duration,
		Listbreen,
		Listcon
	} = toRefs(jic)
</script>

<script>
	export default {
		data() {
			return {
				id: 0,
				open: null,
			};
		},
		onLoad(option) {
			this.id = option.id;
			this.open = this.$refs.popup.open;
		},
	}
</script>

<style lang="less">
	.dppds-xq {
		height: 155rpx;
		border-bottom: 6rpx solid gray;
		font-size: 28rpx;

		>.dppds-xq-jiage {
			color: red;
			height: 40rpx;
			line-height: 40rpx;
			margin-left: 20rpx;
		}

		>.dppds-xq-const {
			display: flex;
			height: 115rpx;
			font-weight: 500;

			>view:nth-child(1) {
				flex: 1;
				height: 100%;
				overflow: hidden;
				margin-left: 20rpx;
			}

			>view:nth-child(2) {
				width: 130rpx;
				height: 100%;
				display: flex;
				justify-content: center;
				align-items: center;
				flex-direction: column;
				border-left: 3rpx solid gray;
				margin-left: 1rpx;
				color: #000;
			}
		}
	}


	.uni-margin-wrap {
		width: 690rpx;
		width: 100%;
	}

	.swiper {
		height: 320rpx;
		margin-top: 20rpx;
	}

	.swiper-item {
		display: block;
		height: 450rpx;
		line-height: 300rpx;
		text-align: center;
	}

	.swiper-list {
		margin-top: 40rpx;
		margin-bottom: 0;
	}

	.uni-common-mt {
		margin-top: 60rpx;
		position: relative;
	}

	.info {
		position: absolute;
		right: 20rpx;
	}

	.uni-padding-wrap {
		width: 550rpx;
		padding: 0 100rpx;
	}

	.example-body {
		padding: 0;
		/* #ifndef APP-NVUE */
		display: block;
		/* #endif */
	}

	.goods-carts {
		/* #ifndef APP-NVUE */
		display: flex;
		/* #endif */
		flex-direction: column;
		position: fixed;
		left: 0;
		right: 0;
		/* #ifdef H5 */
		left: var(--window-left);
		right: var(--window-right);
		/* #endif */
		bottom: 0;
	}
</style>
